<template>
    <el-dialog :class="!visible && 'invisible'"
        class="application-channel"
        :visible.sync="visible"
        @close="dialogClose"
        width="50%">
        <div class="mt-4 pt-4 text-center">
            <h3 class="channel-title">选择应用频道</h3>
            <div class='channel-title-sub text-grey-dark'>最多选择五个应用</div>
            <div class="channel-title-search mb-4" >
                <el-row>
                    <el-col :span="12" class="flex">
                        <el-input v-model="search" class="mr-4" placeholder="搜索应用频道名称" clearable></el-input>
                        <el-button class="btn-primary" @click="channelSearch">搜索</el-button>
                    </el-col>
                </el-row>
            </div>
            <div>
                <div>
                    <el-radio-group v-model="channelType" @change="TypeChange($event)">
                        <el-radio-button label="官方频道"></el-radio-button>
                        <el-radio-button label="其它频道"></el-radio-button>
                    </el-radio-group>
                </div>
            </div>
            <div class="application-channel-box" v-for="(item,index) in channelData" :key="item.id">
                <div v-if="item.nodes&&item.nodes.length > 0">
                    <div class="application-channel-parent text-left mb-2" >
                        {{item.cnname}}
                    </div>
                    <el-row :gutter="10">
                        <el-col class="mb-4" :span="4" v-for="(sitem,sindex) in item.nodes" :key="sitem.id">
                            <span class="application-channel-subname">{{sitem.cnname}}</span>
                            <!-- <div :class="'application-channel-tag mt-2 '+ (sitem.status == 0 ? '' : 'application-channel-tag-selected')" @click="tagChange(index,sindex)">
                                {{sitem.status == 0 ? '投稿' : '已投'}}
                            </div> -->
                            <channel-tag :status.sync="sitem.channelApplyStatus" @change="tagChange($event,index,sindex)"></channel-tag>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <!-- <el-row :gutter="10">
                <el-col :span="12" class="text-right">
                    <el-button type="primary" @click="close">确定</el-button>
                </el-col>
                <el-col :span="12" class="text-left">
                    <span class="ml-2 application-channel-tip">您已投稿五个频道，达到上限</span>
                </el-col>
            </el-row> -->
            <div class="mt-4">
                <el-button class="mt-4" type="info" @click="reset">重置</el-button><el-button class="mt-4" type="primary" @click="confirm">确定</el-button><span v-if="tipTag" class="ml-2 mt-4 application-channel-tip">您已投稿五个频道，达到上限</span>
            </div>    
        </div>
    </el-dialog>
</template>
<script>
import {Dialog , Row , Col , Input ,RadioGroup , RadioButton} from 'element-ui';
import ChannelTag from '../../components/widget/ChannelTag';
export default {
    components: {
        ElDialog: Dialog,
        ElRow: Row,
        ElCol: Col,
        ElInput: Input,
        ElRadioGroup: RadioGroup,
        ElRadioButton: RadioButton,
        ChannelTag
    },
    props: {
         'channelData':{
            type: Array,
            default:[]
         },
         'channelSelected':{
            type: Array,
            default:[]
         }
    },
    data() {
        return {
            visible: false,
            channelList:this.channelData || [],
            search: '',
            channelType:'官方频道',
            tipTag:false,
            id:'',
            resetList:[],
            resetSelected:[]
        };
    },
    computed: {},
    watch: {
        channelSelected:function(val,oldval){
            if(val.length >= 5){
                this.tipTag = true
            }else{
                this.tipTag = false
            }
        },
        search(val){
            if(!val){
                this.channelSearch()
            }
        }
    },
    methods: {
        reset(){
            this.$emit('reset',{
                resetList:this.resetList,
                resetSelected:this.resetSelected
            })
        },
        channelSearch(){
            this.$emit('search',{kw:this.search,id:this.id})
        },
        TypeChange(val){
            //console.log(val)
            this.$emit('typeChange',val)
        },
        dialogClose(){
            this.$emit('close')
        },
        open(id) {
            this.id = id
            this.resetList = JSON.parse(JSON.stringify(this.channelData))
            this.channelData.forEach((item)=>{
                if(item.nodes){
                    item.nodes.forEach((sitem)=>{
                        if(sitem.channelApplyStatus > 0){
                            // let _arry = []
                            // _arry[0] = item.id
                            // _arry[1] = sitem.id
                            let _obj ={}
                            _obj.channelApplyStatus = sitem.channelApplyStatus
                            _obj.id = sitem.id
                            this.channelSelected.push(_obj)
                        }
                    })
                }
            })
            this.resetSelected = JSON.parse(JSON.stringify(this.channelSelected))
           // this.channelList = this.channelData
           this.channelType = '官方频道'
            this.visible = true;
        },
        close() {
            this.tipTag = false
            this.visible = false;
        },
        confirm(){
            this.$emit('confirm',this.id)
        },
        tagChange(status,index,sindex){
            console.log(status,index,sindex)
            let _obj = this.channelData[index].nodes[sindex]
            if(_obj.channelApplyStatus == 0 || _obj.channelApplyStatus == 2){
                if(this.channelSelected.length == 5){
                    Ele.$message.error('最多添加5个分类');
                    _obj.channelApplyStatus = 0
                    this.$set(this.channelData[index].nodes,sindex,_obj)
                    return false
                }else{
                    this.tipTag = false
                    
                    if(_obj.channelApplyStatus != 2){
                        // let _array = []
                        // _array[0] = this.channelData[index].id
                        // _array[1] = _obj.id
                        let _o = {}
                        _o.channelApplyStatus = 5
                        _o.id = _obj.id
                        this.channelSelected.push(_o)
                    }else{
                        this.channelSelected.map(item=>{
                            if(item.id == _obj.id){
                                item.channelApplyStatus = 5
                            }
                            return item
                        })
                    }
                    _obj.channelApplyStatus = 5
                    if(this.channelSelected.length == 5){
                        this.tipTag = true
                    }
                }
            }else{
                let _length =  this.channelSelected.length
                for(let i = 0,_length =this.channelSelected.length ;i<_length;i++){
                    if(this.channelSelected[i].id == _obj.id){
                        this.channelSelected.splice(i,1)
                        break; 
                    }
                }
                _obj.channelApplyStatus = 0
                this.tipTag = false
            }
            this.$set(this.channelData[index].nodes,sindex,_obj)
        }
    }
}
</script>
<style lang="scss">
    .application-channel {
        .el-dialog {
            margin-top: 10vh;
            height: 80vh;
            overflow-y: scroll;
            font-size: 16px;
        }
        .el-dialog__body {
            padding-top: 0;
            font-size: 16px;
        }
        .el-dialog__header {
            padding: 10px 0 0;
        }
        header {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-top: 10px;
        }
        .channel-title{
            font-size: 20px;
            line-height: 1.5;
        }
        .channel-title-sub{
            font-size: 14px;
        }
        .channel-title-search{
            padding:15px 0 25px ;
            border-bottom: 1px solid #f0f0f0;
        }
        &-parent{
            font-size: 16px;
            color: #000;
        }
        &-subname{
            font-size: 14px;
            color: #a9a9a9;
        }
        &-tag{
            cursor: pointer;
            height: 50px;
            line-height: 50px;
            background-color: #eef9ff;
            border-radius: 7px;
            border: 1px solid #eef9ff;
            color: #409EFF;
        }
        &-tag-selected{
            border-color: #409EFF;
            background-color: #fff;
        }
        &-tip{
            font-size: 14px;
            color: #e64d60;
        }

    }
</style>
